import styled from "styled-components";
import {
  Facebook,
  Instagram,
  MailOutline,
  Phone,
  Room,
  Twitter,
} from '@material-ui/icons';

const Container = styled.div`
  display: flex;
  padding: 20px;
`

const ListerShop = styled.div`
  flex-basis: 33.3%;
  padding-right: 20px;
`;

const LinkContainer = styled.div`
  padding-left: 20px;
  flex-basis: 33.3%;
  padding-right: 20px;
`
const ContaactContainer = styled.div`
  padding-left: 20px;
  flex-basis: 33.3%;
`;

const Title = styled.div`
  font-size: ${(props => props.size)}px;
  font-weight: bold;
  text-align: left;
  margin-bottom: 30px;
`;

const Desc = styled.div`
  font-size: 18px;
  font-weight: 300;
  word-break: break-all;
  margin-bottom: 20px;
`;

const SocialContainer = styled.div`
  display: flex;
`;

const SocialIcon = styled.div`
  width: 40px;
  height: 40px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: ${props => props.color};
  border-radius: 50%;
  margin-right: 20px;
`;

const List = styled.ul`
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  flex-wrap: wrap;

`;

const ListItem = styled.li`
  width: 50%;
  margin-bottom: 10px;
`;

const ContactItem = styled.div`
  margin-bottom: 20px;
  display: flex;
  align-items: center;
`;

const Payment = styled.img`
  
`

const Footer = ({}) => {
  return (
    <Container>
      <ListerShop>
        <Title size='30'>
          Listershop
        </Title>
        <Desc>
          Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus quia eligendi nobis reprehenderit commodi laborum quam tenetur consectetur ut sed!
        </Desc>
        <SocialContainer>
          <SocialIcon color={'#E4405F'}>
            <Instagram />
          </SocialIcon>
          <SocialIcon color={'#55ACEE'}>
            <Twitter />
          </SocialIcon>
          <SocialIcon color={'#3B5999'}>
            <Facebook />
          </SocialIcon>
        </SocialContainer>
      </ListerShop>
      <LinkContainer>
        <Title size={'20'}>
          Useful Links
        </Title>
        <List>
          <ListItem>Home</ListItem>
          <ListItem>Cart</ListItem>
          <ListItem>Men Fashion</ListItem>
          <ListItem>Women Fashion</ListItem>
          <ListItem>Accessories</ListItem>
          <ListItem>My Account</ListItem>
          <ListItem>Order Tracking</ListItem>
          <ListItem>Wishlist</ListItem>
          <ListItem>Terms</ListItem>
        </List>
      </LinkContainer>
      <ContaactContainer>
        <Title size={'20'}>
          Contaact
        </Title>
        <ContactItem>
          <Room style={{marginRight: '10px'}}/>
          Lekki, Lagos, Nigeria
        </ContactItem>
        <ContactItem>
          <Phone style={{marginRight:'10px'}}/>
          +1 234 56 789
        </ContactItem>
        <ContactItem>
          <MailOutline style={{marginRight: '10px'}}/>
          info@listerboxshop.com
        </ContactItem>
        <Payment src={'https://i.ibb.co/Qfvn4z6/payment.png'}/>
      </ContaactContainer>
    </Container>
  )
};

export default Footer;
